<template>
	<view class="grid" :class="['col-'+props.col,menuBorder ? 'sm-border' : '', menuCard ? 'card-menu ' : '']">
		<view class="margin-0 flex justify-center padding-sm" v-for="(item, index) in list" :key="index" :data-index="index" :data-value="item" @click="handleSelect">
			<view class="text-center">
				<view class="text-size-34 text-black  text-bold">{{ item.value }}</view>
				<view class="text-size-28 text-gray ">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { useSettingStore } from '@/stores/index';
import { watch, computed, ref } from 'vue';
const setting = useSettingStore();
const emit = defineEmits(['action']);
const props = defineProps({
	menuBorder: {
		type: [Boolean, String],
		default: false
	},
	menuCard: {
		type: [Boolean, String],
		default: false
	},
	col: {
		type: Number,
		default: 4
	},
	list: Array
});
const handleSelect = e => {
	emit('action', e);
};
</script>

<style>
.grid {
	border-radius: 6rpx;
}
</style>
